<template>
  <div class="payment-status" v-cloak>
    <!--失败时： 用icon-iconfontguanbi fail替换icon-duihao2 bg-color-red-->
    <!-- <div
      class="iconfont icon-duihao2 bg-color-red"
      v-if="orderInfo.paid || orderInfo.pay_type == 'offline'"
    ></div>
    <div class="iconfont icon-iconfontguanbi fail" v-else></div> -->
    <!-- 失败时：订单支付失败 -->
    <!-- <div
      class="status"
      v-if="
        (!isWeixin && orderInfo.pay_type == 'weixin') ||
          orderInfo.pay_type == 'offline'
      "
    >
      订单创建成功
    </div>
    <div class="status" v-else-if="orderInfo.paid">订单支付成功</div>
    <div class="status" v-else>订单支付失败</div>
    <div class="wrapper">
      <div class="item acea-row row-between-wrapper">
        <div>订单编号</div>
        <div class="itemCom" v-text="orderInfo.order_id"></div>
      </div>
      <div class="item acea-row row-between-wrapper">
        <div>下单时间</div>
        <div class="itemCom" v-text="orderInfo._add_time"></div>
      </div>
      <div class="item acea-row row-between-wrapper">
        <div>支付方式</div>
        <div
          class="itemCom"
          v-if="orderInfo.pay_type == 'weixin' && orderInfo.is_channel == 2"
        >
          H5微信支付
        </div>
        <div
          class="itemCom"
          v-if="orderInfo.pay_type == 'weixin' && orderInfo.is_channel == 0"
        >
          微信支付
        </div>
        <div class="itemCom" v-if="orderInfo.pay_type == 'yue'">余额支付</div>
        <div class="itemCom" v-if="orderInfo.pay_type == 'offline'">
          线下支付
        </div>
      </div>
      <div class="item acea-row row-between-wrapper">
        <div>支付金额</div>
        <div class="itemCom" v-text="orderInfo.pay_price"></div>
      </div> -->
    <!--失败时加上这个  -->
    <!-- <div
        class="item acea-row row-between-wrapper"
        v-if="
          orderInfo.paid == 0 &&
            orderInfo.pay_type != 'offline' &&
            isWeixin &&
            msgContent
        "
      >
        <div>失败原因</div>
        <div class="itemCom" v-text="msgContent"></div>
      </div>
    </div> -->
    <!--失败时： 重新购买 -->
    <!-- <div v-if="orderInfo.pay_type == 'weixin' && orderInfo.is_channel == 2">
      <div class="returnBnt bg-color-red" @click="goPages()">查看支付结果</div>
      <div class="returnBnt cart-color" @click="goPages()">
        支付失败重新支付
      </div>
    </div>
    <div v-else>
      <div class="returnBnt bg-color-red" @click="goPages()">查看订单</div>
      <div class="returnBnt cart-color" @click="goPages('/')">返回首页</div>
    </div> -->
    <div class="type">
      <img
        class="success"
        v-if="orderInfo.paid == '1'"
        src="@assets/images/paySuccess.png"
        alt=""
      />
      <img
        class="noSuccess"
        v-if="orderInfo.paid == '0'"
        src="@assets/images/payFile.png"
        alt=""
      />
      <div class="p" v-if="orderInfo.paid == '1'">支付成功</div>
      <div class="p" v-if="orderInfo.paid == '0'">支付失败</div>
      <div class="clickP" @click="goPages()">查看订单</div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import { getAdminOrderStatus } from "@api/order";
import { isWeixin } from "@utils";
import cookie from "@utils/store/cookie";

const NAME = "PayMentStatus";

export default {
  name: NAME,
  props: {},
  data: function() {
    return {
      id: "",
      status: 0,
      msgContent: "",
      orderInfo: {},
      isWeixin: isWeixin(),
      from1: "",
      canback: "",
      login_status: ""
    };
  },
  watch: {
    $route(n) {
      if (n.query.msg) this.msgContent = n.query.msg;
      if (n.name === NAME && this.id !== n.params.id) {
        this.id = n.params.id;
        this.status = parseInt(n.params.status);
        this.getOrderInfo();
      }
    }
  },
  computed: {
    ...mapGetters(["userInfo"])
  },
  mounted() {
    this.id = this.$route.params.id;
    this.msgContent = this.$route.query.msg;
    this.canback = this.$route.query.isback;
    let isToken = this.$route.query.isToken;
    if (this.$route.query.isToken) {
      this.$store.commit(
        "LOGIN",
        isToken
        // dayjs(expires_time) - newTime
      );
      cookie.set("OID", this.$route.query.oId);
    }
    this.status = parseInt(this.$route.params.status);
    if (this.$route.query.login_status) {
      this.$store.commit(
        "LOGIN",
        isToken
        // dayjs(expires_time) - newTime
      );
    }
    this.getOrderInfo();
    this.from1 = cookie.get("from1");
    if (this.$route.query.from1) {
      this.from1 = this.$route.query.from1;
    }
    if (this.canback == "1") {
      window["onWebResponse"] = str => {
        this.onWebResponse(str);
      };
    }
  },
  methods: {
    // 嵌入app获取支付状态
    onWebResponse: function(str) {
      // alert(123);
      var obj = JSON.parse(str);
      // alert(obj.action);
      var action = obj.action;
      var self = this;
      var content = obj.content;
      if (action == "onAppClickBack") {
        // alert(123);
        self.toFirstPage();
      }
    },
    //声音禁掉
    toFirstPage: function() {
      var u = navigator.userAgent,
        app = navigator.appVersion;
      var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1; //g
      var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      const win = window;
      var obj = {
        action: "returnHomePage",
        content: {}
      };
      if (isAndroid) {
        App.onAppResponse(JSON.stringify(obj));
      }
      if (isIOS) {
        win.webkit.messageHandlers.onAppResponse.postMessage(
          JSON.stringify(obj)
        );
      }
    },
    goPages(route) {
      if (this.from1 == "app") {
        this.$router.push({
          path: "/order/list/0?from1=app"
        });
      } else if (this.from1 == "wxapp") {
        this.$router.push({
          path: "/order/list/0?from1=wxapp"
        });
      } else {
        this.$router.push({
          path: "/order/list/0"
        });
      }
    },
    getOrderInfo() {
      getAdminOrderStatus(this.id).then(res => {
        this.orderInfo = res.data.orderInfo;
        if (this.isWeixin) {
          document.title = this.orderInfo.paid ? "支付成功" : "支付失败";
        } else {
          document.title = "订单创建成功";
        }
      });
    }
  }
};
</script>
<style scoped>
.type {
  width: 100%;
  height: 100%;
}
.type .noSuccess {
  width: 1.7rem;
  height: 2.36rem;
  margin-left: 2.6rem;
}
.type .success {
  width: 4.26rem;
  height: 2.36rem;
  margin-left: 1.32rem;
}
.p {
  font-size: 0.32rem;
  padding-top: 0.34rem;
  color: rgba(0, 0, 0, 0.7);
  width: 100%;
  line-height: 0.44rem;
  text-align: center;
}
.clickP {
  margin-top: 1.4rem;
  color: rgba(255, 50, 62, 1);
  border: 0.02rem solid rgba(255, 50, 62, 1);
  line-height: 1;
  height: 0.88rem;
  border-radius: 0.16rem;
  width: 6.9rem;
  padding: 0.28rem 0;
  font-size: 0.32rem;
  box-sizing: border-box;
  text-align: center;
}
</style>
